import React, { Component } from 'react';
import pic from '../assets/pic/001.gif'
import '../styles/MyEntry.css'
import { index_nav } from '../api';

class MyEntry extends Component {
    constructor(props) {
        super(props);
        this.state = {
            nav:[]
        }
    }
    componentDidMount() {
        index_nav().then((res)=>{
            // console.log(res.data);
            this.setState({
                nav:res.data.list
            })
          })
    }

    render() {
        return (
            <div className='list'>
                {
                    //列表渲染,列表中每个列表项必须有一个唯一的key值,否则渲染不出来
                    this.state.nav.length !=0 ?
                        this.state.nav.map((item, index) => {
                            return (
                                <div className="item" key={index}>
                                    <img src={item.pic} alt="" />
                                    <div className="name">{item.name}</div>
                                </div>
                            )
                        }) : <div className="empty">网络异常,请尝试刷新页面</div>
                }
                {
                    // 如果列表为空,显示 提示标签(条件渲染)
                    // this.state.list.length == 0 &&
                    // <div className="empty">网络异常,请尝试刷新页面</div>
                }
            </div>
        );
    }
}

export default MyEntry;